.container {
  padding-bottom: 50px;

  .top {
    padding: 0 20px;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $bgColor;

    &-left {
      .top-left-box {
        display: flex;
        align-items: center;
        justify-content: center;

        &-icon {
          margin-right: 8px;
          display: flex;
          align-items: center;

          image {
            width: 16px;
            height: 16px;
            vertical-align: bottom;
          }
        }

        &-text {
          font-size: $fontSize;
          color: $btnColor;
          line-height: 22px;
        }
      }
    }

    &-right {
      display: flex;
      align-items: center;

      &-icon {
        display: flex;
        align-items: center;
        margin-right: 8px;

        image {
          width: 16px;
          height: 16px;
          vertical-align: bottom;
        }
      }

      &-text {
        font-size: 14px;
        color: $remarkColor;
      }
    }
  }

  .list {
    &-item {
      display: flex;
      height: 66px;
      align-items: center;
      justify-content: space-between;
      margin: 0 24px;
      border-bottom: 1px solid $lineColor;

      &-left {
        width: 0;
        flex: 1;
        display: flex;
        align-items: center;

        &-main {
          display: flex;
          align-items: center;

          &-img {
            display: flex;
            align-items: center;

            image {
              width: 40px;
              height: 40px;
              vertical-align: bottom;
            }
          }

          &-main {
            margin-left: 12px;

            &-top {
              font-size: $fontSizeSm;
              letter-spacing: 0;
              line-height: 20px;
              font-weight: 600;
              padding: 0 8px;
              border-radius: 99px;
              width: fit-content;
            }

            &-top1 {
              color: #F8AC30;
              background: rgba(248, 172, 48, 0.15);
            }

            &-top2 {
              color: $successColor;
              background: rgba(87, 194, 45, 0.15);
            }

            &-top3 {
              color: #2DC2A2;
              background: rgba(45, 194, 191, 0.15);
            }

            &-top4 {
              color: $errorColor;
              background: rgba(242, 38, 53, 0.15);
            }

            &-bottom {
              margin-top: 4px;
              font-family: $fontFamilyEn;
              font-size: $fontSize;
              color: $textColor;
              line-height: 22px;
            }
          }
        }
      }

      &-right {
        display: flex;
        align-items: center;
        flex-shrink: 0;

        &-text {
          font-size: $fontSize;
          color: $remarkColor;
          line-height: 20px;
          margin-right: 8px;
        }

        &-icon {
          display: flex;
          align-items: center;

          image {
            width: 16px;
            height: 16px;
            vertical-align: bottom;
          }
        }
      }
    }
  }

  .modal-form {
    padding: 16px 48px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 16px;
  }

  .setting-form {
    padding: 16px 34px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 16px;
  }

  .detail-modal {
    padding: 0 16px 38px;

    &-img {

      image {
        width: 100%;
        height: 290px;
        vertical-align: bottom;
      }
    }

    &-list {
      display: flex;
      flex-direction: column;
      grid-row-gap: 12px;

      &-item {
        display: flex;
        align-items: center;

        &-label {
          font-size: $fontSize;
          color: $textColor;
          line-height: 22px;
          margin-right: 24px;
        }

        &-value {
          font-size: 14px;
          color: $textColorTitle;
          line-height: 22px;
        }

        &-sign {
          font-size: $fontSizeSm;
          color: #2DC2A2;
          line-height: 20px;
          font-weight: 600;
          padding: 0 8px;
          border-radius: 99px;
        }

        &-sign1 {
          color: #F8AC30;
          background: rgba(248, 172, 48, 0.15);
        }

        &-sign2 {
          color: $successColor;
          background: rgba(87, 194, 45, 0.15);
        }

        &-sign3 {
          color: #2DC2A2;
          background: rgba(45, 194, 191, 0.15);
        }

        &-sign4 {
          color: $errorColor;
          background: rgba(242, 38, 53, 0.15);
        }
      }
    }
  }
}
